{% extends "base.html" %}

{% block title %}注册{% endblock %}


{% block styles %}

	<style>
		.form-control{
			height: 45px;
		}

	</style>

{% endblock %}






{% block content %}
    <div class="container-fluid">
		<!-- 标题用户注册 -->
		<div class="row" style="margin-top: 70px;">
		   <div class="col-sm-6 col-sm-offset-3" >
		      	<h1 class="text-center">注册</h1>
		   </div>
		   <!-- 注册 -->
		   <div class="row" style="font-size: 50px;">
			   <div class="col-sm-6 col-sm-offset-3">
				   <form method="post" action="{{ url_for('register') }}">
<!-- {#                       <input type="hidden" class="csr_token" name="csrf_token" value="{{ csrf_token()  }}">#} -->
				     <div class="form-group">
				       <label for="name">用户名:</label>
{#                         required 比填的#}
				       <input type="text" class="form-control" id="name" name="username" placeholder="请输入用户名" required >
                         <span style="color: red; display: none;" class="message"></span>
				     </div>
				     <div class="form-group">
				       <label for="Password">密码:</label>
				       <input type="password" class="form-control" id="Password" name="psw"  placeholder="请输入密码" required>
				     </div>

					 <!-- 辅助类清楚浮动 -->
					 <div class="clearfix"></div>
					 <button type="submit" class="btn btn-info register" style="margin-top: 10px; float: right; width: 35%;"  >注册</button>

				   </form>


			   </div>
		   </div>

		</div>

	</div>



{% endblock %}

{% block js %}
<script>
	$(document).ready(function(){
    $('#name').blur(function(){
      $.ajax({
        url: "{{ url_for('check_name') }}",
        type: 'POST',
        {#  传剃数据#}
        data: "username=" + $('#name').val(),
        {#  获取响应结果#}
        success: function(result, status){
          console.log(result);
          if(result.code == 2000){
              $('.message').css('display', 'block')
              $('.message').text(result.msg)
          {#    禁止注册按钮使用设置一个disabled 属性  存在不可用#}
              $('.register').prop('disabled', true)
          }else {
              $('.message').css('display', 'none')
              $('.register').prop('disabled', false)
          }
        },
      });
    });
  });
			  
</script>
{% endblock %}